<template>
  <!-- 组织架构表单 -->
  <el-dialog :visible.sync="localVisible" :title="title" width="500px" @close="handleClose" append-to-body>
    <div class="role-cards">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(role, index) in roles" :key="index" class="col-margin">
          <el-card :body-style="{ padding: '0px' }" :class="{ active: selectedRole == role.id }"
            @click.native="selectRole(role)">
            <img :src="role.avatar" class="image">
            <div style="padding: 14px;">
              <span>{{ role.name }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ role.description }}</time>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="mini">取消</el-button>
      <el-button type="primary" @click="btnOk" size="mini">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { changeRole } from '@/api/user';
export default {
  name: 'ChangeRole',
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false,
      required: true
    },
    title: {
      type: String,
      default: '切换角色'
    },
    roleId: {
      type: Number,
      default: 1,
    }
  },
  data() {
    return {
      localVisible: this.showRoleDialog,
      selectedRole: this.roleId,
      roles: [
        {
          id: '1',
          name: '系统管理员',
          description: '所有权限',
          avatar: require('@/assets/common/roleIcon/guanliyuan.png')
        },
        {
          id: '2',
          name: '校长',
          description: '所有权限',
          avatar: require('@/assets/common/roleIcon/ManageDirector.png')
        },
        {
          id: '3',
          name: '财务',
          description: '财务结算',
          avatar: require('@/assets/common/roleIcon/caiwurenyuan.png')
        },
        {
          id: '4',
          name: '教务主任',
          description: '教务权限',
          avatar: require('@/assets/common/roleIcon/paidanyuan.png')
        },
        {
          id: '5',
          name: '教务',
          description: '题库权限',
          avatar: require('@/assets/common/roleIcon/putongyuangong.png')
        },
      ]
    };
  },
  watch: {

    showRoleDialog(newVal) {
      this.localVisible = newVal;

    },
    localVisible(newVal) {
      if (newVal !== this.showRoleDialog) {
        this.$emit('update:showRoleDialog', newVal);
      }
    }
  },
  methods: {
    selectRole(role) {
      this.selectedRole = role.id;
    },
    async btnOk() {
      //发送切换请求
      console.log(this.selectedRole);
      await changeRole({ role: this.selectedRole })
      // 通知父组件更新
      this.$emit('submit');
      // 成功提示
      this.$message.success(`切换角色成功`);
      // 关闭对话框
      this.handleClose();
    },
    handleClose() {
      this.localVisible = false;
      this.selectedRole = null;
    }
  }
};
</script>

<style scoped>
/* 可以在这里添加样式 */
.role-cards .el-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* 垂直排列子元素 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  text-align: center;
  /* 文本居中对齐 */
}

.role-cards .el-card.active {
  background-color: #409EFF;
  color: white;
}

.role-cards .el-card img {
  width: 60px;
  height: 80px;
  margin-bottom: 10px;
  margin-left: 10px;
  display: block;
}

.role-cards .bottom {
  margin-top: 13px;
  line-height: 12px;
}

.role-cards .time {
  font-size: 13px;
  color: #999;
}

.role-cards .bottom .button {
  padding: 0;
  float: right;
}

.col-margin {
  margin-bottom: 10px;
}
</style>